<template>
	<view class="main-cont ">
		<view class="box box-align-center box-pack-start padd20 main-top">
			<!-- <u-avatar :src="src" mode="square"></u-avatar> -->
			<view class="icon mr10"></view>
			<view class="ml10">
				<view class="class-name">
					{{dclass.bjmc}}
				</view>
				<view class="box box-align-center box-pack-start mt10">
					<u-image src="@/static/home/icon_group1.png" width="29rpx" height="24rpx"></u-image>
					<view class="mr10 ml10 cnt">
						{{stuNum}}人
					</view>
				</view>
			</view>
		</view>
		<view class="group">
			<view class="group-top">
				评分小组组员（{{zyList.length}}名）
			</view>
			<view class="box box-align-center box-pack-between list mt10" v-for="(item,index) in zyList" :key="index">
				<view class="box box-align-center box-pack-start">
					<u-avatar :src="url" mode="circle" size="75"></u-avatar>
					<view class="ml10 mr15">
						{{item.name}}
					</view>
					<view class="">
						学号：{{item.sn}}
					</view>
				</view>
				<view class="" @click="handleOpen(item)">
					···
				</view>
				
			</view>
			<view class="box box-align-center box-pack-center group-bottom">
				<view class="reset-add-btn" @click="clickAdd()">
					+ 添加组员
				</view>
			</view>
		</view>
		
		<u-popup v-model="show" mode="bottom " border-radius="14" height="648rpx" :safe-area-inset-bottom="true">
			<view class="box box-tb box-align-center box-pack-start title">
				<view class="box box-pack-start box-align-center delete-list" @click="handleDelete()">
					<u-image src="@/static/home/icon_delete.png" width="31rpx" height="34rpx"></u-image>
					<view class="ml20">
						删除
					</view>
				</view>
				<view class="box box-pack-start box-align-center delete-list" @click="handleChange()">
					<u-image src="@/static/home/icon_hr.png" width="31rpx" height="34rpx"></u-image>
					<view class="ml20">
						换人
					</view>
				</view>
			</view>
			<view class="box box-align-center box-pack-center">
				<view class="flex-1" @click="handleCancel()">
					取消
				</view>
			</view>
		</u-popup>
		<u-modal v-model="deleteShow" content="是否把当前学生移除评分小组？" :show-cancel-button="true" @confirm="confirm"></u-modal>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dclass:uni.getStorageSync("dclass"),
				stuNum:0,
				zyList:[],
				checkedItem:{},
				checkedType:0,
				
				deleteId:0,
				deleteShow:false,
				show:false
			}
		},
		onLoad(opt) {
			this.pfxzList();
		},
		methods: {
			pfxzList(){
				this.$api.post({url: '/dstudent/pfxzList',method: 'post'}, {classid:this.dclass.id}).then(res => {
						if(res.code==0){
							this.stuNum = res.stuNum;
							this.zyList = res.zylist;
						}
					})
			},
			clickAdd() {
				uni.navigateTo({
					url: "/stupageHome/addMember"
				})
			},
			//弹出操作
			handleOpen(item) {
				console.log(item);
				this.checkedItem = item;
				this.checkedType = item.type;
				this.show = true
			},
			//弹出删除
			handleDelete(id) {
				this.deleteShow = true
			},
			//取消
			handleCancel() {
				this.show = false
			},
			//换人
			handleChange() {
				uni.navigateTo({
					url:"/stupageHome/addOneMember?userid="+this.checkedItem.id+"&type="+this.checkedType
				})
			},
			//确定删除
			confirm() {
				this.$api.post({url:'/dstudent/delPfxzUser',method: 'post'}, {classid:this.dclass.id,userid:this.checkedItem.id,type:this.checkedType}).then(res => {
					this.pfxzList();
					this.$refs.uToast.show({
						title: '删除成功',
						type: 'success'
					})
				})
				this.deleteShow = false
				this.show = false
			}
		}
	}
</script>

<style scoped lang="scss">
	.main-cont {
		width: 100%;
		height: 100%;
		
		.main-top {
			background-color: #fff;
		}

		.class-name {
			font-size: 30rpx;
			font-weight: bold;
		}

		.cnt {
			color: #6E73D8;
			font-size: 25rpx;
		}

		.tips {
			font-size: 20rpx;
			color: #5F6572;
		}

		.group {
			margin: 16rpx auto 0;
			width: 722rpx;
			min-height: 250rpx;
			border-radius: 20rpx;
			background-color: #fff;

			.group-top {
				padding: 0 20rpx;
				width: 100%;
				height: 72rpx;
				line-height: 72rpx;
				font-size: 27rpx;
				color: #2F3142;
				text-align: left;
				border-bottom: 2rpx solid #F0F1F8;
			}
			
			
			.list {
				margin-top: 40rpx;
				padding: 0 40rpx;
			}
			.group-bottom {
				height: 177rpx;
			}

			.reset-add-btn {
				width: 212rpx;
				height: 52rpx;
				line-height: 52rpx;
				background: #7686F6;
				border-radius: 26rpx;
				font-size: 25rpx;
				color: #fff;
				text-align: center;
			}
		}

	}
	.flex-1,
	.flex-2 {
		flex: 1;
		text-align: center;
		height: 112rpx;
		line-height: 112rpx;
		font-size: 28rpx;
		background: #F8F9FC;
		color: #1C1C1C;
		font-weight: bold;
	}
	
	.flex-2 {
		color: #626BF1;
	}
	
	.delete-list {
		padding: 0 40rpx;
		width: 100%;
		height: 130rpx;
	}
	.icon {
		width: 14rpx;
		height: 128rpx;
		background: #8A8DF3;
		box-shadow: 4rpx 1rpx 13rpx 0px #626BF1;
		border-radius: 7rpx;
	}
</style>
